<template>
  <el-scrollbar height="100%">
    <div class="show">
      <div>
        <img :src="currentImageUrl" alt="Main Image" class="main-image"/>
      </div>

      <div class="thumbnails">
        <el-carousel :interval="5000" type="card" indicator-position="none"
                     class="thumbnail" arrow="never" @change="handleCarouselChange">
          <el-carousel-item v-for="(item, index) in carouselData" :key="index">
            <img :src="BASE_URL + item.poster" alt="Thumbnail" @click="changeCarousel(index)"/>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="MaskLayer">
        <div class="content">
          <p class="title">{{ filmName }}</p>
          <p>{{ englishName }}</p>
          <p>{{ regionFormatter(regionList, null, region) }} </p>
          <p>{{ releaseDate }} 上映 </p>
        </div>
      </div>
    </div>

  <el-row :gutter="10" style="margin:20px;">
   <el-col :span="14">
     <el-card style="height: 320px;padding: 20px;box-sizing: border-box;">
       <el-row :gutter="10">
         <el-col :span="12" v-for="tag in tagList" style="margin-top: 10px">
             <div :style="{background: tag.color,width: '5px',height: '80px',float: 'left'}"></div>
             <div style="float: left;margin-left: 10px">
               <p style="font-size: 16px;font-weight: bolder">{{tag.name}}</p>
               <span style="font-size: 14px;font-weight: bolder">{{tag.num}}</span>
             </div>
         </el-col>
       </el-row>
     </el-card>
   </el-col>
    <el-col :span="10">
      <el-card style="height: 320px;padding: 20px;box-sizing: border-box;text-align: center;">
        <el-row :gutter="10">
          <el-col :span="6" v-for="item in routerList" style="margin-top: 10px">
            <el-button :type="item.type" circle
                       style="width: 80px;height:80px;"
                       @click="handleClick(item.path)">
              <el-icon size="35px">
                <component :is="item.icon" />
              </el-icon>
            </el-button>
            <p style="font-size: 12px;margin-top: 10px">{{item.txt}}</p>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
  </el-scrollbar>
</template>

<script setup>
import {onMounted, ref} from "vue";
import router from "@/router";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const routerList = ref([
  {type: 'primary', icon: 'Film', txt: '电影管理', path: '/film'},
  {type: 'primary', icon: 'Files', txt: '专题管理', path: '/subject'},
  {type: 'primary', icon: 'Avatar', txt: '演员管理', path: '/actor'},
  {type: 'primary', icon: 'VideoCameraFilled', txt: '导演管理', path: '/director'},
  {type: 'primary', icon: 'UserFilled', txt: '员工管理', path: '/employee'},
  {type: 'primary', icon: 'User', txt: '用户管理', path: '/user'},
  {type: 'primary', icon: 'ZoomIn', txt: '字典管理', path: '/dict'},
  {type: 'primary', icon: 'Operation', txt: '轮播图管理', path: '/carouselMap'}
]);
const handleClick = (path) => {
  router.push(path)
}

const regionList = ref([]);
onMounted(() => {
  loadDictOptions(regionList, 'nationality');
});

const regionFormatter = (row, column, cellValue, index) => {
  if (!regionList.value) {
    return cellValue;
  }
  for (let item of regionList.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
}
const carouselData = ref([]);
const carouselByStatus = () => {
  let data = qs.stringify({
    status: 1
  });
  axios.get(BASE_URL + '/v1/carousel/select?' + data)
      .then((response) => {
        if (response.data.code === 2000) {
          carouselData.value = response.data.data;
          if (carouselData.value.length > 0) {
            changeCarousel(0)
          }
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
onMounted(() => {
  carouselByStatus();
})
const currentImageUrl = ref('');

const changeCarousel = (index) => {
  currentImageUrl.value = BASE_URL + carouselData.value[index].poster;
  updateCurrentImage(index)
}
const handleCarouselChange = (newIndex) => {
  changeCarousel(newIndex);
  updateCurrentImage(newIndex)
}

const filmName = ref(''); // 当前图片的标题
const englishName = ref('');
const region = ref('');
const releaseDate = ref('');
const filmId = ref('');
const updateCurrentImage = (index) => {
  const currentItem = carouselData.value[index];
  filmName.value = currentItem.filmName;
  englishName.value = currentItem.englishName;
  region.value = currentItem.region;
  releaseDate.value = currentItem.releaseDate;
  filmId.value = currentItem.filmId;
}

const tagList = ref([
  {color: '#409EFF', name: '总影片', num: ''},
  {color: '#67C23A', name: '上映', num: ''},
  {color: '#E6A23C', name: '预告', num: ''},
  {color: '#F56C6C', name: '下架', num: ''},
]);
const totalFilm = ref('');
const releaseNumber = ref('');
const preview = ref('');
const takeOff = ref('');

const fetchData = () => {
  axios.get(BASE_URL + '/v1/film/selectData')
      .then((response) => {
        if (response.data.code === 2000) {
          totalFilm.value = response.data.data.totalFilm;
          releaseNumber.value = response.data.data.releaseNumber;
          preview.value = response.data.data.preview;
          takeOff.value = response.data.data.takeOff;

          // 更新tagList中的num值
          tagList.value[0].num = totalFilm.value;
          tagList.value[1].num = releaseNumber.value;
          tagList.value[2].num = preview.value;
          tagList.value[3].num = takeOff.value;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      })
      .catch(error => {
        console.error('There was an error fetching the data!', error);
        ElMessage({
          message: '请求过程中发生错误，请稍后再试。',
          type: 'error',
          showClose: true,
          center: true,
        });
      });
};

// 在组件挂载时调用fetchData
onMounted(() => {
  fetchData();
});
</script>


<style scoped>
.show {
  height: 400px;
  margin: 0 20px;
  position: relative;
  overflow: hidden;
}

.main-image {
  float: right;
  width: 800px;
  height: 400px;
  border-radius: 10px;
}

.thumbnails {
  width: 600px;
  position: absolute;
  bottom: 50px;
  right: -100px;
  z-index: 2;
}

.thumbnail {
  height: 100px;
  margin: 0 auto;

  img {
    width: 150px;
    height: 90px;
    border: 2px solid #FFFFFF;
  }
}

.el-carousel__item--card {
  background-color: transparent;
  margin-left: 20px;
  width: 156px;
  height: 96px;
}
.MaskLayer {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 1200px;
  height: 400px;
  background: linear-gradient(115deg, #08111a 40%, rgba(15, 24, 39, 0) 70%);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.content {
  position: absolute;
  top: 5%;
  left: 90px;
  font-size: 20px;
  color: #fff;

  p {
    margin-bottom: 10px;
  }
}

.title {
  font-size: 40px;
  font-weight: bold;
}

</style>